<!-- 微信登录 -->
<!-- 手机号获取 -->
<!-- 用户信息授权 --> 

<template>
  <view class="login-container">
    <!-- Logo区域 -->
    <view class="logo-area">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="title">趣味汉字</text>
      <text class="subtitle">快乐学习汉字的好帮手</text>
    </view>

    <!-- 登录按钮区域 -->
    <view class="login-area">
      <!-- 微信登录按钮 -->
      <button 
        class="wx-login-btn"
        open-type="getPhoneNumber" 
        @getphonenumber="handleGetPhoneNumber"
      >
        <text class="iconfont icon-weixin"></text>
        微信一键登录
      </button>

      <!-- 跳过按钮 -->
      <view class="skip-btn" @click="handleSkip">
        <text>跳过</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>

    <!-- 底部协议 -->
    <view class="agreement">
      <text>登录即表示同意</text>
      <text class="link" @click="showAgreement">用户协议</text>
      <text>和</text>
      <text class="link" @click="showPrivacy">隐私政策</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

// 处理获取手机号
const handleGetPhoneNumber = async (e) => {
  try {
    // 获取code
    const { code } = await uni.login()
    
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      // 获取手机号成功
      const { token, is_new_user } = await userStore.wxLogin(
        code,
        e.detail.code
      )
      
      // 跳转到首页
      uni.switchTab({
        url: '/pages/generate/index'
      })
      
      // 如果是新用户,显示新手引导
      if(is_new_user) {
        uni.showModal({
          title: '温馨提示',
          content: '是否查看新手引导?',
          success: (res) => {
            if (res.confirm) {
              // 跳转到新手引导页
              uni.navigateTo({
                url: '/pages/guide/index'
              })
            }
          }
        })
      }
    } else {
      // 用户拒绝授权
      uni.showToast({
        title: '需要授权手机号才能使用完整功能',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: error.message || '登录失败',
      icon: 'none'
    })
  }
}

// 跳过登录
const handleSkip = () => {
  uni.switchTab({
    url: '/pages/generate/index'
  })
}

// 显示用户协议
const showAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/index'
  })
}

// 显示隐私政策
const showPrivacy = () => {
  uni.navigateTo({
    url: '/pages/privacy/index'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  padding: 0 30rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.logo-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -100rpx;

  .logo {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 30rpx;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.login-area {
  margin-bottom: 100rpx;

  .wx-login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(to right, #07C160, #06AD56);
    border-radius: 44rpx;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      margin-right: 10rpx;
      font-size: 40rpx;
    }
  }

  .skip-btn {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 28rpx;

    .iconfont {
      margin-left: 10rpx;
      font-size: 24rpx;
    }
  }
}

.agreement {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding-bottom: env(safe-area-inset-bottom);

  .link {
    color: #07C160;
    display: inline;
  }
}
</style> 